<template name="goods-order">
  <view class="main">
    <view class="list" v-for="(item, index) in list" :key='index'>
      <view class="goods">
        <view class="order_key">
          <text v-if="showBt == 'demand'" class="left" @tap="copyText(item.addressKey)">订单号：{{item.addressKey}}</text>
          <view style="">
            <text class="right" v-if='item.status == 1'>
              <text style="#0000FF;font-weight: bold;font-size:30rpx;">已发布</text>
            </text>
            <text class="right" v-else-if='item.status == 2'>
              <text style="color: #FF0000;font-weight: bold;font-size:27rpx;">失败/取消</text>
            </text>
            <text class="right" v-else-if='item.status == 3'>
              <text v-if="item.runnerStatus == 4" 
              style="color: #33FF33;font-weight: bold;font-size:30rpx;">转接单</text>
              <text v-else style="color: #FF00FF;font-weight: bold;font-size:30rpx;">进行中</text>
            </text>
            <text class="right" v-else-if='item.status == 4'>
              <text style="color: #FF8C00;font-weight: bold;font-size:30rpx;">已完成</text>
            </text>
            <text class="right" v-else-if='item.status == 5'>
              <text style="color: #FF8C00;font-weight: bold;font-size:30rpx;">待审核</text>
            </text>
          </view>
        </view>
        <view class="left">
          <view class="create_time mrb10">
            <text>创建时间：{{item.createTime}}</text>
          </view>
          <view class="run_type mrb10">
            <text v-if="item.runType == 0">配送方式：普通</text>
            <text v-else>配送方式：<text class="bold">加急</text></text>
          </view>
          <view class="pay_type mrb10">
            <text>支付方式：{{item.payType == 0 ? '线下支付':'线上支付'}}</text>
          </view>
          <view class="context mrb10">
            <text>内容：{{item.context}}</text>
          </view>
          <view class="context mrb10">
            <text>地址：{{item.address}}</text>
          </view>
          <view class="price mrb10 bold">
            <text>金额：{{(item.money + item.emergencyFee)*1.0/10}}</text>
          </view>
          <view class="bt-center" v-if="showBt == 'demand'">
            <button class="look" @click="toDemandDetail(item.addressKey)" :orderId="item.addressKey">详细</button>
            <button v-if="item.status == 3" class="look"
              @click="onReminder(item.addressKey)">催单</button>
            <button v-if="item.status == 1 || item.status == 2" class="look"
              @click="onUpdateAddress(item.addressKey, item.status)">改地址</button>
            <button v-if="item.status == 4" class="look" @click="estimate(item.addressKey, 0)">评价</button>
            <button v-if="item.status == 4" class="look" @click="consultWith(item.addressKey, 0)">协商</button>
            <button v-if="item.status != 3" class="look" @click="onDeleteDemand(item.addressKey)">取消</button>
          </view>
          <view class="bt-center" v-else-if="showBt == 'runner'">
            <button v-if="types == 5" class="look" @click="toFinishOrder(item.addressKey)">已完成</button>
            <button v-if="types == 5" class="look" @click="toTransferOrder(item.addressKey)">转接</button>
            <button v-if="types <= 4" class="look" @click="onAcceptDemamd(item.addressKey)">抢单</button>
            <button class="look" @click="toDemandDetail(item.addressKey)" :orderId="item.addressKey">详细</button>
            <button v-if="types == 6" class="look" @click="estimate(item.addressKey, 1)">评价</button>
            <button v-if="types == 6" class="look" @click="consultWith(item.addressKey, 1)">协商</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'

  export default {
    name: "goods-order",
    computed: {
      // 2. 从 m_user 模块中导入需要的 token 字符串
      ...mapState('m_user', ['userInfo']),
    },
    data() {
      return {
        showDemandButton: false,
      };
    },
    // 此处定义传入的数据,属性
    props: {
      list: {
        type: Array,
        value: null
      },
      types: {
        type: Number,
        value: null
      },
      showBt: {
        type: String,
        value: null,
      }
    },
    //组件生命周期
    created: function(e) {

    },
    mounted() {

    },
    methods: {
      // 转接单
      async toTransferOrder(orderId) {
        const {
          data: result
        } =  await uni.$http.post('/api/READ/api/my/orders/transfer/order/'+orderId);
        if (result.code != '200') return uni.$showMsg(result.msg);
        uni.$showMsg("订单已经转移");
      },
      // 协商
      async consultWith(orderId, type) {
        const query = {
          orderId: orderId,
          uid: this.userInfo.userId,
          type: type,
        }
        // console.log(query)
        const {
          data: result
        } =  await uni.$http.post('/api/READ/api/my/consult/commit/consult', query);
        if (result.code != '200') return uni.$showMsg(result.msg);
        uni.$showMsg("已发送协商请求");
      },
      // 催单
      async onReminder(orderId) {
        const {
          data: result
        } = await uni.$http.post('/api/READ/api/my/orders/reminder/' + orderId);
        if (result.code != '200') return uni.$showMsg(result.msg);
        uni.$showMsg("催单成功！");
      },
      // 评价
      estimate(orderId, type){
        uni.navigateTo({
          url: '/components/my-estimate/my-estimate?orderId=' + orderId + '&type=' + type,
        })
      },
      // 完成订单任务
      toFinishOrder(orderId) {
        // console.log(orderId)
        uni.navigateTo({
          url: '/components/finish-demand/finish-demand?orderId=' + orderId,
        })
      },
      // 点击复制订单号
      copyText(res) {
        uni.setClipboardData({
          data: res,
          success: () => {
            uni.showToast({
              title: '复制成功'
            })
          }
        })
      },
      // 抢单
      async onAcceptDemamd(key) {
        var query = {
          uid: this.userInfo.userId,
          demandKey: key
        }
        const {
          data: result
        } = await uni.$http.post('/api/READ/api/my/orders/accept/demand', query);
        if (result.code != '200') return uni.$showMsg(result.msg);
        uni.$showMsg("抢单成功！");
      },
      toDemandDetail(val) {
        uni.navigateTo({
          url: '/components/my-demand-detail/my-demand-detail?orderId=' + val
        })
      },
      async onDeleteDemand(val) {
        var that = this;
        uni.showModal({
          title: '是否删除',
          success: function(res) {
            if (res.confirm) {
              console.log('点击了确认')
              uni.$http.post('/api/READ/api/my/demand/delete/' + val).then((res) => {
                // console.log(res)
                var result = res.data
                if (result.code != '200') return uni.$showMsg(result.msg);
                uni.$showMsg("成功删除，请刷新页面");
              })

            }
          }
        });
      },
      // 选择收货地址
      async onUpdateAddress(key, status) {
        // console.log(key)
        // console.log(status)
        // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
        //    返回值是一个数组：第1项为错误对象；第2项为成功之后的收货地址对象
        const [err, succ] = await uni.chooseAddress().catch(err => err);

        // 2. 用户成功的选择了收货地址
        if (succ && succ.errMsg === 'chooseAddress:ok') {
          let query = {
            addressKey: key,
            address: succ
          }
          const {
            data: result
          } = await uni.$http.post('/api/READ/api/my/demand/update/address', query);
          if (result.code != '200') return uni.$showMsg(result.msg);
          uni.$showMsg("地址修改成功");

          // 更新 vuex 中的收货地址
          this.updateAddress(succ)
        }
      },
    }
  }
</script>

<style lang="scss">
  .bt-center {
    display: flex;
    justify-content: space-around;
  }

  .context {
    width: 550rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .look {
    width: 150rpx;
    height: 60rpx;
    font-size: 29rpx;
    line-height: 60rpx;
    border: 10rpx;
    background-color: #FFDD55;
    color: black;
  }

  .mrb10 {
    margin-bottom: 15rpx;
  }

  .bold {
    font-weight: bold;
    color: red;
  }

  .left {
    margin-left: 25rpx;
    margin-top: 15rpx;
    float: left;
  }

  .right {
    margin-right: 25rpx;
    margin-top: 15rpx;
    float: right;
  }

  .goods {
    border: 1px solid #FFDD55;
    border-radius: 10rpx;
    margin: 4% 0 4% 0;
    background-color: azure;
    height: 580rpx;
  }
</style>